<template>
    <div id="DecompanyTempEdit" class="wrap_common">
        <div class="sel_wrap">
            <div class="sel_list" v-for="(item, index) in list" :key="item.id" @click="changeCheck(index)">
                <div class="sel_list_img">
                    <img :src="item.url" alt />
                </div>
                <div class="sel_btn">
                    <div class="iconfont_wrap" :class="{ 'active' : onlyViewStatus == index  }">
                        <i class="iconfont iconxuanze"></i>
                    </div>
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
        <footer @click="saveFn">
            <div class="bottom_btn_com">启用模板</div>
        </footer>
    </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { getUserTemp } from '@/api/decoration'
import { editUserApi } from '@/api/system'
import { getBasicUser, getUser } from '@/utils/auth'
export default {
	name: 'de-company-temp-edit',
	data() {
		return {
			onlyViewStatus: 0,
			list: '',
			imgPreview: []
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			this._getUserTemp()
			this.onlyViewStatus = this.userInfo.user_template
		},
		_getUserTemp() {
			let params = {
				type: this.userInfo.role_id
			}
			getUserTemp(params).then(res => {
				if (res.status === 'success') {
					let data = res.data
					this.list = data.data
					if (data && data.data) {
						for (let i = 0; i < data.data.length; i++) {
							this.imgPreview.push(data.data[i].url)
						}
					}
				}
			})
		},
		// 保存资料
		saveFn() {
			let params = {
				user_template: this.onlyViewStatus
			}
			editUserApi(params).then(res => {
				if (res.status === 'success') {
					this.$toast('保存成功！')
					setTimeout(() => {
						getBasicUser(this.owner_user_id, true)
						getUser(true)
						uni.navigateBack()
					}, 500)
				}
			})
		},
		// 预览
		imgPreviewBtn(index) {
			uni.previewImage({
				urls: this.imgPreview,
				current: index
			})
		},
		// 选择模板
		changeCheck(val) {
			this.onlyViewStatus = val
		}
	}
}
</script>
<style lang="scss" scoped>

#DecompanyTempEdit {
    .sel_wrap {
        padding: 30px;
        @include direction(center, space-between);
        .sel_list {
            width: 48%;
            .sel_list_img {
                height: 830px;
                overflow: hidden;
                border-radius: 30px;
                margin-bottom: 30px;
                img {
                    // height: 100%;
                    border-radius: 30px;
                }
            }
            .sel_btn {
                @include disFlexCen;
                span {
                    font-size: 28px;
                    margin-left: 10px;
                }
            }
        }
    }

    // 公共勾选
    .iconfont_wrap {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border: 1px solid $borderColorMain; /*no*/
        border-radius: 50%;
        & > i {
            font-size: 46px;
            color: #fff;
            border: 1px solid $borderColorMain; /*no*/
            border-radius: 50%;
        }
    }
    .iconfont_wrap.active {
        & > i {
            color: #3a1b04;
            background-color: #ffd11a;
            border-color: #fff;
        }
    }

    img {
        display: block;
        width: 100%;
    }
}
</style>

